import React, { memo, useState } from "react";
import PropTypes from "prop-types";
import SectionTabsWrapper from "./style";
import classNames from "classnames";
import ScrollView from "@/base-ui/scroll-view";

const SectionTabs = memo(function SectionTabs(props) {
  const { tabs = [], changeTabsHandle } = props;
  const [currentAction, setCurrentAction] = useState(0);

  function clickTabHandle(index, name) {
    setCurrentAction(index);
    changeTabsHandle(index, name);
  }
  return (
    <ScrollView>
      <SectionTabsWrapper>
        {tabs.map((tabname, index) => {
          return (
            <div
              key={tabname}
              className={classNames([
                "item",
                {
                  active: index === currentAction,
                },
              ])}
              onClick={() => clickTabHandle(index, tabname)}
            >
              {tabname}
            </div>
          );
        })}
      </SectionTabsWrapper>
    </ScrollView>
  );
});

SectionTabs.propTypes = {
  tabs: PropTypes.array,
};

export default SectionTabs;
